<!doctype html>
<html lang="cn">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,user-scalable=no" />
	<title>微信支付</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<link rel="stylesheet" type="text/css" href="./css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="./css/iconfont/iconfont.css">
	<script type="text/javascript" src="http://fwp.juboon.com:80/fwp/ui/web/datejs/jquery.min.js"></script>
	<!--<script type="text/javascript" src="http://fwp.juboon.com:80/fwp/ui/Invitation/js/main.js"></script>-->
</head>

<body data-type="wepay">
	<header class="header">
		<div class="item" onclick="window.location.href='product.html'">话费支付</div>
		<div class="item active" onclick="window.location.href='recharge.html'">微信支付</div>
	</header>
	<!-- 内容区域 -->
	<section class="wrap wrapTop payment">

		<!-- 头部banner -->
		<a href="javascript:;" class="paymentBar"><img src="http://fwp.juboon.com:80/fwp/ui/Invitation/img/paymentBar.png"></a>

		<!-- 手机号码 -->
		<div class="phoneNumber">
			<input type="tel" placeholder="请输入11位手机号码" id="phone" name="tel" maxlength="11">
			<div class="Attribution"></div>
			<i class="iconfont icon-wenhao icon-flowPacket"></i>
			<i class="iconfont icon-wenhao icon-telephone"></i>
		</div>

		<!-- 背景分割 -->
		<div class="Farebg"></div>

		<ul class="flowFareTab">
			<li class="active">充流量</li>
			<li>充话费</li>
		</ul>
		<!-- 充流量 -->
		<div class="flowFareCon" style="display: block;" id="chargeCon1">
			<!-- 流量包 -->
			<ul class="flowPacket" id="flowPacket">
				<li class="item active"><span>10M</span></li>
				<li class="item"><span>50M</span></li>
				<li class="item"><span>100M</span></li>
				<li class="item"><span>500M</span></li>
				<li class="item"><span>1G</span></li>
			</ul>
			<!-- 流量订购 -->
			<div class="flowPrice">
				<!-- 省内 -->
				<div class="flowPriceCon" id="flowPriceCon1">
					<div class="left">
						<div class="PriceConTop">
							<h3 class="price" id="price1">2元</h3>
							<span class="region1">省内</span>
							<div class="hotMsg" id="integral1"></div>
							<i class="iconfont icon-hui"></i>
						</div>
						<h4 class="introduce">省内流量 立即生效 月底失效 适用于2/3/4G用户</h4>
					</div>
					<div class="purchaseBtn1" id="pay_btn1">购买</div>
				</div>
				<!-- 国内 -->
				<div class="flowPriceCon" id="flowPriceCon2">
					<div class="left">
						<div class="PriceConTop">
							<h3 class="price" id="price2">2元</h3>
							<span class="region2">国内</span>
							<div class="hotMsg" id="integral1"></div>
						</div>
						<h4 class="introduce">国内流量 立即生效 月底失效 适用于2/3/4G用户</h4>
					</div>
					<div class="purchaseBtn2" id="pay_btn2">购买</div>
				</div>
			</div>
			<!-- 到账时间 -->
			<ul class="arrival">
				<li>
					<h4>到账时间</h4>
					<p>24小时内到达</p>
				</li>
				<li>
					<h4>流量时限</h4>
					<p>当月有效</p>
				</li>
				<li>
					<h4>运营商</h4>
					<p>联通/电信/移动</p>
				</li>
			</ul>
		</div>
		<!-- 充话费 -->
		<div class="flowFareCon">
			<!-- 流量包 -->
			<ul class="flowPacket" id="flowFareList">
				<li class="item" price3="售价：28.00~30.00元"><span>30元</span></li>
				<li class="item" price3="售价：49.00~50.00元"><span>70元</span></li>
				<li class="item active" price3="售价：98.00~100.00元"><span>100元</span></li>
				<li class="item" price3="售价：196.00~200.00元"><span>200元</span></li>
				<li class="item" price3="售价：294.00~300.00元"><span>300元</span></li>
				<li class="item" price3="售价：490.00~500.00元"><span>500元</span></li>
			</ul>
			<div class="telephoneFare">
				<div class="price" id="price3">售价：98.00~100.00元</div>
				<div class="btn">立即充值</div>
			</div>
		</div>
		<!-- 联系客服 -->
		<p class="arrivalKF">如有任何问题，请联系公众号客服人员！</p>

		<!-- 充值弹窗 -->
		<div class="popup kindly">
			<div class="popupCon kindlyCon animated">
				<h3 class="title">充值说明</h3>
				<section>
					<h4>订购限制：</h4>
					<p>移动：一个自然月支持10次叠加。</p>
					<p>联通：一个自然月可充值5次，当一种流量包充值次数达到限制时，可选择其他面额流量包进行充值。</p>
					<p>电信：可支持无限次叠加。</p>

					<h4>时效说明：</h4>
					<p>流量包自开通之日起立即生效，当月结束后失效，剩余流量不转结至下个月。</p>

					<h4>如出现以下情况可能会导致微信支付失败：</h4>
					<p>1、处于欠费停机状态用户；</p>
					<p>2、未办理实名认证，被列入运营商黑名单用户；</p>
					<!--<p>3、170号段虚拟运营商用户和携号转网用户；</p>-->
					<p>3、订购的套餐与流量包互斥，具体互斥规定以移动运营商公布为准；</p>
					<p>4、订购失败我们会在3个工作日内退款到您的账户，如有疑问请联系客服。</p>
				</section>
				<i class="iconfont icon-cha kindlyBtn"></i>
			</div>
		</div>

		<!-- 话费弹窗 -->
		<div class="popup Fare">
			<div class="popupCon FareCon animated">
				<h3 class="title">话费充值说明</h3>
				<section>
					<p>1.请核对清楚号码，再进行充值。交易一旦成功，话费会马上入账，资金同时也会支付到运营商，以免充错号码造成不必要的损失。</p>

					<p>2.月末、月初充值高峰时段，到账时间有一定延迟，若长时间不到账，请在公众号底部对话框中直接反馈问题。</p>

					<p>3.话费充值24小时内到账，若充值失败将于48小时内发起退款。</p>

					<p>4.若订单充值失败，我们会及时办理退款，款项会返回到您的微信“零钱”，一般3-5个工作日到账，遇节假日后延。</p>

					<p>5.手机充值业务发票是由运营商提供，您充值成功后，可到当地运营商营业厅打印上月的实际消费发票。因各运营商规定不同，充值前请咨询当地营业厅关于发票获取的政策，或拨打运营商客服电话咨询</p>
				</section>
				<i class="iconfont icon-cha FareBtn"></i>
			</div>
		</div>


		<!-- 省内弹窗 -->
		<div class="popup province">
			<div class="popupCon provinceCon animated">
				<h3 class="title">产品详情</h3>
				<ul class="provinceDetails">
					<li class="id">产品编号：<span id="proId1">FU2310010M</span></li>
					<li class="tel">充值号码：<span id="phone1">18607710331</span></li>
					<li class="name">产品名称：<span id="pname1">广西联通500M国内包</span></li>
					<li class="money">实付金额：<span id="pprice1">30.00元</span></li>
					<li style="display: none"><span id="productAuth"></span></li>
				</ul>
				<div class="paymentBtn" id="pay1">微信支付</div>
				<h4 class="introduce">省内流量 立即生效 月底失效 适用于2/3/4G用户</h4>
				<i class="iconfont icon-cha provinceBtn"></i>
			</div>
		</div>

		<!-- 国内弹窗 -->
		<!--<div class="popup domestic">
			<div class="popupCon domesticCon animated">
				<h3 class="title">产品详情</h3>
				<ul class="domesticDetails">
					<li class="productId2">产品编号：<span id="proId2">FU2310010M</span></li>
					<li class="phone2">充值号码：<span id="phone2">18607710331</span></li>
					<li class="pname2">产品名称：<span id="pname2">广西联通500M国内包</span></li>
					<li class="pprice2">实付金额：<span id="pprice2">30.00元</span></li>
				</ul>
				<div class="paymentBtn" id="pay2">微信支付</div>
				<h4 class="introduce">国内流量 立即生效 月底失效 适用于2/3/4G用户</h4>
				<i class="iconfont icon-cha domesticBtn"></i>
			</div>
		</div>-->

		<!-- 话费弹窗 -->
		<!--<div class="popup huafei">
			<div class="popupCon huafeiCon animated">
				<h3 class="title">产品详情</h3>
				<ul class="provinceDetails">
					<li class="productId3">产品编号：<span id="proId3">FU2310010M</span></li>
					<li class="phone3">充值号码：<span id="phone3">18607710331</span></li>
					<li class="pname3">产品名称：<span id="pname3">广西联通500M国内包</span></li>
					<li class="pprice3">实付金额：<span id="pprice3">30.00元</span></li>
				</ul>
				<div class="paymentBtn" id="pay3">微信支付</div>
				<h4 class="introduce"></h4>
				<i class="iconfont icon-cha huafeiBtn"></i>
			</div>
		</div>-->

	</section>

	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

	<!-- javascript -->
	<script type="text/javascript">
		(function () {
			setRem();
			window.addEventListener("orientationchange", setRem);
			window.addEventListener("resize", setRem);

			function setRem() {
				var html = document.querySelector("html");
				var width = html.getBoundingClientRect().width;
				html.style.fontSize = width / 20 + "px";
			}
		})();
		window.onload = function () {
			try {
				var mySwiper = new Swiper('.swiper-container', {
					// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
					direction: 'horizontal',
					// 循环切换的
					loop: true,
					// 自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
					autoplay: 2400,
					// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
					autoplayDisableOnInteraction: false,
					// 滑动速度
					speed: 600,
					// 如果需要分页器
					pagination: '.swiper-pagination',
					// slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
					effect: "coverflow",
				});
			} catch (err) {
				//在此处理错误 
				return false;
			}
		};

		// // 选项卡切换
		// (function () {
		// 	var oUl = document.querySelector('.flowFareTab');
		// 	var aLi = oUl.getElementsByTagName('li');
		// 	var aCon = document.querySelectorAll('.flowFareCon');
		// 	var oIF = document.querySelector(".icon-flowPacket");
		// 	var oIT = document.querySelector(".icon-telephone");

		// 	for (var i = 0; i < aLi.length; i++) {
		// 		var This = this;
		// 		aLi[i].setAttribute("index", i);
		// 		aLi[i].onclick = function () {
		// 			for (var i = 0; i < aLi.length; i++) {
		// 				aLi[i].className = '';
		// 				aCon[i].style.display = 'none';
		// 			};
		// 			this.className = "active";
		// 			aCon[this.getAttribute("index")].style.display = 'block';

		// 			if (this.getAttribute("index") == 0) {
		// 				oIF.style.display = "block";
		// 				oIT.style.display = "none"
		// 			} else if (this.getAttribute("index") == 1) {
		// 				oIT.style.display = "block"
		// 				oIF.style.display = "none";
		// 			}
		// 		};
		// 	};
		// })();

		// $('#pay3').on('click', function () {
		// 	var phoneNo = $("#phone").val();
		// 	var productId = $("#productId3").val();
		// 	if ('' == phoneNo) {
		// 		alert("请填写手机号码");
		// 		return;
		// 	} else if (!/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/i.test(phoneNo)) {
		// 		alert("请填写正确的手机号码");
		// 		return;
		// 	}
		// 	if ('' == productId) {
		// 		alert("请选择购买的话费");
		// 		return;
		// 	}

		// 	$("#productId").val(productId);
		// 	$("#phoneNo").val(phoneNo);

		// 	$("#flowform").submit();
		// });

	</script>

</body>

</html>